<template>
    <div>
    <nav-bar></nav-bar>
    <h2>请输入壁纸图片所在的文件路径</h2>
    <h3>‘\’请替换为‘/’</h3>
      <input type="text" v-model="imagePath" placeholder="请输入图片路径" />
      <button @click="setWallpaper">确认</button>
    </div>
  </template>
  
  <script>
  
  import NavBar from './Page/NavBar.vue';
  const { ipcRenderer } = require('electron');
  export default {
    components:{NavBar},
    data() {
      return {
        imagePath: '', // 用户输入的图片路径
      };
    },
    methods: {
      setWallpaper() {
        // 获取用户输入的图片路径
        const imagePath = this.imagePath;
  
        // 执行设置壁纸的操作
        // 这里替换为你实际的设置壁纸逻辑
        // 例如使用 IPC 向主进程发送消息
        // ipcRenderer.send('set-wallpaper', imagePath);
  
        // 清空输入框
        // const imagePath = 'C:/Users/52688/Desktop/5a4bb5fc1dd89d58e012dbafbe05951.jpg'; // 替换为实际的图片路径      
      this.$emit('set-wallpaper', imagePath);
      console.log(imagePath)
      ipcRenderer.send('set-wallpaper', imagePath);
        this.imagePath = '';
      },
    },
  };
  </script>

  
<style>
.wallpaper-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.input-container {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

input[type="text"] {
  width: 300px;
  height: 30px;
  margin-right: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 5px 10px;
  background-color: #2196f3;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

h2, h3 {
  margin: 10px 0;
}
</style>
  